<!--智慧消防V1.0-edit.vue页面-->
<template>
    <div class="app-container">
                <div style="text-align: center;margin-bottom: 30px">
                    检测设备信息{{createStatus?'新增':'更新'}}
                </div>
                <div style="width: 50% ;margin: 0 auto;">
                <el-form :model="equipmentForm" ref="equipmentForm" :rules="equipmentFormRules" label-width="100px">
                    <el-form-item label="设备名称" prop="name">
                        <el-input type="text" v-model="equipmentForm.name" placeholder="请输入设备名称" clearable></el-input>
                    </el-form-item>
                  <el-form-item label="设备类型" prop="name">
                      <el-select style="width: 100%" v-model="equipmentForm.type" ref="selectUpResId" placeholder="请选择设备类型">
                        <el-option
                            v-for="dict in equipmentOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                        />
                      </el-select>
                    </el-form-item>
<!--                    <el-form-item label="智能情况 " prop="intellect">-->
<!--                        <el-select v-model="equipmentForm.intellect" placeholder="请选择智能情况" style="width: 100%">-->
<!--                            <el-option :value="false" label="非智能"></el-option>-->
<!--                            <el-option :value="true" label="智能"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
                    <el-form-item label="所属企业" prop="enterpriseId" v-if="enterPriseHidden">
                        <el-select v-model="equipmentForm.enterpriseId" filterable placeholder="请选择主体" style="width: 100%">
                            <el-option v-for="(item,index) in enterpriseDominantList" :key="index" :value="item.ucId"
                                       :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属建筑" prop="buildId">
                        <el-select v-model="equipmentForm.buildId" filterable placeholder="请选择所属建筑" style="width: 100%"
                                   @change="getBuildingRegion">
                            <el-option v-for="(item,index) in buildingList" :key="index" :value="item.ucId"
                                       :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>
<!--                  <el-form-item label="盒子名称" prop="boxId">-->
<!--                    <el-select v-model="equipmentForm.boxId" placeholder="请选择盒子" style="width: 100%">-->
<!--                      <el-option v-for="(item,index) in boxIdList" :key="index" :value="item.ucId"-->
<!--                                 :label="item.name"></el-option>-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
                  <el-form-item label="IMEI" prop="imei">
                    <el-input type="text" v-model="equipmentForm.imei" placeholder="设备IMEI码"
                              clearable></el-input>
                  </el-form-item>
                    <el-form-item label="楼层" prop="floor">
                        <el-input type="text" v-model="equipmentForm.floor" placeholder="请输入楼层" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="详细地址" prop="address">
                        <el-input type="text" v-model="equipmentForm.address" placeholder="请输入详细地址"
                                  clearable></el-input>
                    </el-form-item>
                  <el-form-item label="监测类型">
                    <el-select style="width: 100%" v-model="equipmentForm.pressureType"  placeholder="请选择监测类型">
                      <el-option
                          v-for="dict in pressureTypeOptions"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="监测阈值" prop="thresholdValue">
                    <el-input type="text" v-model="equipmentForm.thresholdValue" placeholder="请输入监测阈值"
                              clearable></el-input>
                  </el-form-item>
                    <el-form-item label="所属区域" prop="regionId">
                        <el-select v-model="equipmentForm.regionId" filterable placeholder="请选择设备区域" style="width: 100%">
                            <el-option v-for="(item,index) in regionList" :key="index" :value="item.ucId"
                                       :label="item.name"></el-option>
                        </el-select>
                    </el-form-item>
                  <el-form-item label="示例图">
                    <el-upload
                        class="avatar-uploader"
                        :headers="headers"
                        :action="uploadImg"
                        :data="{type:'image'}"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                      <img v-if="equipmentForm.image&& imgFlag == false" :src="equipmentForm.image" class="avatar">
                      <i v-else-if="!equipmentForm.image&& imgFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
                      <el-progress v-if="imgFlag == true" type="circle" :percentage="imgUploadPercent" style="margin-top:30px;"></el-progress>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="首页码表类型">
                    <el-select style="width: 100%" v-model="equipmentForm.mark"  placeholder="请选择首页码表类型">
                      <el-option
                          v-for="dict in echartTypes"
                          :key="dict.dictValue"
                          :label="dict.dictLabel"
                          :value="dict.dictValue"
                      />
                    </el-select>
                  </el-form-item>

<!--                    <el-form-item label="是否主机" prop="isHost">-->
<!--                      <el-switch v-model="equipmentForm.isHost" active-text="是" inactive-text="否" active-color="#13ce66"-->
<!--                                 ></el-switch>-->
<!--                    </el-form-item>-->
                </el-form>
                </div>
                <div style="text-align: center" class="dialog-footer">
                    <el-button @click="cancelPlace">取 消</el-button>
                    <el-button :loading="addLoading" v-if="createStatus" type="primary" @click="createEquipment">创 建</el-button>
                    <el-button :loading="addLoading" v-else type="primary" @click="updatePlace">修 改</el-button>
                </div>
    </div>
</template>

<script>
import {addInMeasuringEquipment,updateInMeasuringEquipment, getInMeasuringEquipmentVo} from "@/api/equipment";
import {getBuildingList} from "@/api/building";
import {getInRegionList} from "@/api/region";
import {getInFireproofRegionList} from "@/api/fireproofRegion";
import {getInEnterpriseDominantList} from "@/api/enterpriseDominant";
import {getInFireproofRegionVo} from "@/api/fireproofRegion";
import {getRegionList} from "@/api/enterprise";
import {getToken} from "@/utils/auth";
import {uploadImg} from "@/api/common";

export default {
    name: "EquipmentEdit",
    data(){
        return{
          uploadImg,
          equipmentForm:{
            intellect: true,
            isHost: true,
            image: ""
          },
          equipmentFormRules:{
              name: [{required: true, message: '设备名称不能为空', trigger: 'blur'}],
              enterpriseId: [{required: true, message: '所属企业不能为空', trigger: 'blur'}],
              imei: [{required: true, message: '设备imei码不能为空', trigger: 'blur'}],
          },
          addLoading:false,
          buildingList:[],
          equipmentOptions:[],
          enterpriseDominantList:[],
          regionList:[],
          echartTypes:[],
          fireproofRegionList:[],
          pressureTypeOptions:[],
          imgFlag:false,
          imgUploadPercent:0,
          boxIdList:[
              {
                  ucId:'d47325b021df44039f2a8735132e92ab',
                  name:'天马通讯盒'
              }
          ]

        }
    },
    computed:{
        createStatus(){
            return this.$route.params.ucId =='0'
        },
        headers() {
          return {
            'Authorization': getToken()
          }
        },
        enterPriseHidden(){
          let roleCode = this.$store.getters.roleCode;
          return roleCode=="ADMIN"||roleCode=="XT-ADMIN"||roleCode=="ZD-ADMIN"||roleCode=="DD-ADMIN"||roleCode=="JW-ADMIN"||roleCode=="WB-ADMIN"
        }
    },
    created() {
      this.getDicts("equipment_jc_type").then(response => {
        this.equipmentOptions = response.data.data;
      });
      this.getDicts("echart_type").then(response => {
        this.echartTypes = response.data.data;
      });
      this.getDicts("pressure_type").then(response => {
        this.pressureTypeOptions = response.data.data;
      });
        this.getInEnterpriseDominantList()
        this.getBuildingList()
        if (!this.createStatus){
            this.getInEquipmentVo()
        }
        this.getRegionList()
        this.getInFireproofRegion()
        this.getBoxIdList();
    },
    methods:{
      //获取本企业的区域信息
      getRegionList(){
          getRegionList({}).then(res=>{
              this.regionList = res.data
          })
      },
      handleAvatarSuccess(res, file) {
        //图片上传成功
        console.log(res)
        this.imgFlag = false;
        this.equipmentForm.image = res.data;
      },
      uploadImgProcess(event, file, fileList){
        this.imgFlag = true;
        this.imgUploadPercent = file.percentage.toFixed(0);
      },
      beforeAvatarUpload(file) {
        console.log(file.type)
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 8;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      cancelPlace(){
        window.history.back()
      },
      createEquipment(){
          this.addLoading = true
          this.$refs['equipmentForm'].validate(valid => {
              if (valid){
                addInMeasuringEquipment(this.equipmentForm).then(res=>{
                      this.addLoading = false
                      this.$notify.success({
                          title: '成功',
                          message: "添加检测设备信息成功"
                      })
                      this.cancelPlace()
                  }).catch(res=>{
                      this.addLoading = false
                      this.$notify.error({
                          title: '失败',
                          message: res.msg
                      })
                  })
              }else {
                  this.addLoading = false
                  console.log("表单验证不通过")
              }
          })
      },
      updatePlace(){
        this.addLoading = true
        this.$refs['equipmentForm'].validate(valid => {
            if (valid){
              updateInMeasuringEquipment(this.equipmentForm).then(res=>{
                    this.addLoading = false
                    this.$notify.success({
                        title: '成功',
                        message: "更新检测设备信息成功"
                    })
                    this.cancelPlace()
                }).catch(res=>{
                    this.addLoading = false
                    this.$notify.error({
                        title: '失败',
                        message: res.msg
                    })
                })
            }else {
                this.addLoading = false
                console.log("表单验证不通过")
            }
        })
      },
      getInEquipmentVo(){
        getInMeasuringEquipmentVo({ucId:this.$route.params.ucId}).then(res=>{

              this.equipmentForm = res.data
              this.equipmentForm.type = res.data.type + ""
          }).catch(error=>{
              console.log(error)
          })

      },
      getBuildingList(){
          getBuildingList({deleted:false}).then(res=>{
              this.buildingList = res.data
          }).catch(error=>{
              console.log(error)
          })
      },
      getBuildingRegion(){
          getInRegionList({}).then(res=>{
              this.regionList = res.data
          }).catch(error=>{
              console.log(error)
          })
      },
      getInFireproofRegion(){
        getInFireproofRegionList({}).then(res=>{
          this.fireproofRegionList = res.data
        }).catch(error=>{
          console.log(error)
        })
      },
      getInEnterpriseDominantList(){
            getInEnterpriseDominantList({deleted:false}).then(res=>{
                this.enterpriseDominantList = res.data
            }).catch(error=>{

            })
        },
      getBoxIdList(){
        getInFireproofRegionVo({deleted:false}).then(res=>{
          this.bboxIdList = res.data
        }).catch(error=>{

        })
      },



    }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 149px;
  height: 149px;
  line-height: 149px;
  text-align: center;
}
.avatar {
  width: 149px;
  height: 149px;
  display: block;
}
</style>
